<template>
  <el-row type="flex" class="row-bg xl:h-58vh lt-xl:h-37vh overflow-y-auto">
    <el-col :span="24" class="mt-20px">
      <div>
        <p class="title"><span class="title-box"></span>报告评分<span style="font-size: 14px; color: #8c939d; margin-left: 20px">0-300分 资质较差 | 300-500 资质正常 | 500-700 资质良好 | 700-1000 资质优秀</span></p>
        <p class="mt-10px">
          <el-row type="flex" class="row-bg" justify="end">
            <el-col style="padding-right: 10px" :xl="2" :lg="2" :md="24" :sm="24" :xs="24"><span>申请准入分</span></el-col>
            <el-col :xl="22" :lg="22" :md="24" :sm="24" :xs="24">
              <el-progress :percentage="props.qjlddata.a22160001 ? props.qjlddata.a22160001 / 10 : 0" :format="getFormat1" :stroke-width="18" :text-inside="true" status="success">
                {{ props.qjlddata.a22160001 }}
              </el-progress>
            </el-col>
          </el-row>
        </p>
        <p class="mt-10px">
          <el-row type="flex" class="row-bg" justify="end">
            <el-col style="padding-right: 10px" :xl="2" :lg="2" :md="24" :sm="24" :xs="24"><span>申请准入置信度</span></el-col>
            <el-col :xl="22" :lg="22" :md="24" :sm="24" :xs="24">
              <el-progress :percentage="props.qjlddata.a22160002 ? props.qjlddata.a22160002 : 0" :format="getFormat2"  :stroke-width="18" :text-inside="true" status="success">
                {{ props.qjlddata.a22160002 }}
              </el-progress>
            </el-col>
          </el-row>
        </p>
        <p class="mt-10px">
          <el-row type="flex" class="row-bg" justify="end">
            <el-col style="padding-right: 10px" :xl="2" :lg="2" :md="24" :sm="24" :xs="24"><span>贷款行为分</span></el-col>
            <el-col :xl="22" :lg="22" :md="24" :sm="24" :xs="24">
              <el-progress :percentage="props.qjlddata.b22170001 ? props.qjlddata.b22170001 / 10 : 0"  :stroke-width="18" :text-inside="true">
                {{ props.qjlddata.b22170001 }}
              </el-progress>
            </el-col>
          </el-row>
        </p>
        <p class="mt-10px">
          <el-row type="flex" class="row-bg" justify="end">
            <el-col style="padding-right: 10px" :xl="2" :lg="2" :md="24" :sm="24" :xs="24"><span>贷款行为置信度</span></el-col>
            <el-col :xl="22" :lg="22" :md="24" :sm="24" :xs="24">
              <el-progress :percentage="props.qjlddata.b22170051 ? props.qjlddata.b22170051 : 0"  :stroke-width="18" :text-inside="true">
                {{ props.qjlddata.b22170051 }}
              </el-progress>
            </el-col>
          </el-row>
        </p>
      </div>
    </el-col>
    <el-col :span="24" class="mt-20px">
      <div>
        <p class="title"><span class="title-box"></span>借贷履约情况</p>
        <table style="width: 100%;table-layout: fixed;border-collapse: collapse; word-wrap: break-word">
          <tr>
            <th>类型</th>
            <th>近1个月</th>
            <th>近3个月</th>
            <th>近6个月</th>
            <th>近12个月</th>
            <th>近24个月</th>
          </tr>
          <tr>
            <td>机构总查询笔数</td>
            <td>{{ props.qjlddata.a22160008 }}</td>
            <td>{{ props.qjlddata.a22160009 }}</td>
            <td>{{ props.qjlddata.a22160010 }}</td>
            <td>-</td>
            <td>-</td>
          </tr>
          <tr>
            <td>贷款笔数</td>
            <td>{{ props.qjlddata.b22170002 }}</td>
            <td>{{ props.qjlddata.b22170003 }}</td>
            <td>{{ props.qjlddata.b22170004 }}</td>
            <td>{{ props.qjlddata.b22170005 }}</td>
            <td>{{ props.qjlddata.b22170006 }}</td>
          </tr>
          <tr class="tr-green">
            <td>成功扣款笔数</td>
            <td>{{ props.qjlddata.b22170045 }}</td>
            <td>{{ props.qjlddata.b22170046 }}</td>
            <td>{{ props.qjlddata.b22170047 }}</td>
            <td>{{ props.qjlddata.b22170048 }}</td>
            <td>{{ props.qjlddata.b22170049 }}</td>
          </tr>
          <tr class="tr-red">
            <td>失败扣款笔数</td>
            <td>{{ props.qjlddata.b22170035 }}</td>
            <td>{{ props.qjlddata.b22170036 }}</td>
            <td>{{ props.qjlddata.b22170037 }}</td>
            <td>{{ props.qjlddata.b22170038 }}</td>
            <td>{{ props.qjlddata.b22170039 }}</td>
          </tr>
          <tr>
            <td>贷款总金额</td>
            <td>{{ props.qjlddata.b22170007 }}</td>
            <td>{{ props.qjlddata.b22170008 }}</td>
            <td>{{ props.qjlddata.b22170009 }}</td>
            <td>{{ props.qjlddata.b22170010 }}</td>
            <td>{{ props.qjlddata.b22170011 }}</td>
          </tr>
<!--          <tr class="tr-green">
            <td>履约贷款次数</td>
            <td>{{ props.qjlddata.b22170045 }}</td>
            <td>{{ props.qjlddata.b22170046 }}</td>
            <td>{{ props.qjlddata.b22170047 }}</td>
            <td>{{ props.qjlddata.b22170048 }}</td>
            <td>{{ props.qjlddata.b22170049 }}</td>
          </tr>-->
          <tr class="tr-green">
            <td>履约贷款总金额</td>
            <td>{{ props.qjlddata.b22170040 }}</td>
            <td>{{ props.qjlddata.b22170041 }}</td>
            <td>{{ props.qjlddata.b22170042 }}</td>
            <td>{{ props.qjlddata.b22170043 }}</td>
            <td>{{ props.qjlddata.b22170044 }}</td>
          </tr>
          <tr class="tr-red">
            <td>累计逾期金额</td>
            <td>-</td>
            <td>-</td>
            <td>{{ props.qjlddata.b22170031 }}</td>
            <td>{{ props.qjlddata.b22170032 }}</td>
            <td>{{ props.qjlddata.b22170033 }}</td>
          </tr>
          <tr>
            <td>贷款机构数</td>
            <td>{{ props.qjlddata.b22170016 }}</td>
            <td>{{ props.qjlddata.b22170017 }}</td>
            <td>{{ props.qjlddata.b22170018 }}</td>
            <td>{{ props.qjlddata.b22170019 }}</td>
            <td>{{ props.qjlddata.b22170020 }}</td>
          </tr>
          <tr>
            <td>消金类贷款机构数</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>{{ props.qjlddata.b22170021 }}</td>
            <td>{{ props.qjlddata.b22170022 }}</td>
          </tr>
          <tr>
            <td>网贷类贷款机构数</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>{{ props.qjlddata.b22170023 }}</td>
            <td>{{ props.qjlddata.b22170024 }}</td>
          </tr>
          <tr>
            <td>MO+逾期贷款笔数</td>
            <td>-</td>
            <td>-</td>
            <td>{{ props.qjlddata.b22170025 }}</td>
            <td>{{ props.qjlddata.b22170026 }}</td>
            <td>{{ props.qjlddata.b22170027 }}</td>
          </tr>
          <tr>
            <td>M1+逾期贷款笔数</td>
            <td>-</td>
            <td>-</td>
            <td>{{ props.qjlddata.b22170028 }}</td>
            <td>{{ props.qjlddata.b22170029 }}</td>
            <td>{{ props.qjlddata.b22170030 }}</td>
          </tr>
        </table>
      </div>
    </el-col>
    <el-col :span="24" class="mt-20px">
      <div>
        <p class="title"><span class="title-box"></span>信用状况报告详情</p>
        <el-row type="flex" class="box-content" >
          <el-col :xl="4" :lg="4" :md="24" :sm="24" :xs="24" class="mt-10px">
            <div class="box-back">
              <p>机构查询总数</p>
              <p style="color: green">{{props.qjlddata.a22160006 ? props.qjlddata.a22160006 : '-'}}</p>
            </div>
          </el-col>
          <el-col :xl="1" :lg="1" :md="0" :sm="0" :xs="0" class="mt-10px"/>
          <el-col :xl="4" :lg="4" :md="24" :sm="24" :xs="24" class="mt-10px">
            <div class="box-back">
              <p>申请命中机构数</p>
              <p style="color: green">{{props.qjlddata.a22160003 ? props.qjlddata.a22160003 : '-'}}</p>
            </div>
          </el-col>
          <el-col :xl="1" :lg="1" :md="0" :sm="0" :xs="0" class="mt-10px"/>
          <el-col :xl="4" :lg="4" :md="24" :sm="24" :xs="24" class="mt-10px">
            <div class="box-back">
              <p>申请命中消金类机构数</p>
              <p style="color: green">{{props.qjlddata.a22160004 ? props.qjlddata.a22160004 : '-'}}</p>
            </div>
          </el-col>
          <el-col :xl="1" :lg="1" :md="0" :sm="0" :xs="0" class="mt-10px"/>
          <el-col :xl="4" :lg="4" :md="24" :sm="24" :xs="24" class="mt-10px">
            <div class="box-back">
              <p>申请命中网络贷款类机构数</p>
              <p style="color: green">{{props.qjlddata.a22160005 ? props.qjlddata.a22160005 : '-'}}</p>
            </div>
          </el-col>
          <el-col :xl="1" :lg="1" :md="0" :sm="0" :xs="0" class="mt-10px"/>
          <el-col :xl="4" :lg="4" :md="24" :sm="24" :xs="24" class="mt-10px">
            <div class="box-back">
              <p>最近一次查询时间</p>
              <p style="color: green">{{props.qjlddata.a22160007 ? props.qjlddata.a22160007 : '-'}}</p>
            </div>
          </el-col>
          <el-col :xl="4" :lg="4" :md="24" :sm="24" :xs="24" class="mt-10px">
            <div class="box-back">
              <p>贷款已结清订单数</p>
              <p style="color: green">{{props.qjlddata.b22170052 ? props.qjlddata.b22170052 : '-'}}</p>
            </div>
          </el-col>
          <el-col :xl="1" :lg="1" :md="0" :sm="0" :xs="0" class="mt-10px"/>
          <el-col :xl="4" :lg="4" :md="24" :sm="24" :xs="24" class="mt-10px">
            <div class="box-back">
              <p>信用贷款时长</p>
              <p style="color: green">{{props.qjlddata.b22170053 ? props.qjlddata.b22170053 : '-'}}</p>
            </div>
          </el-col>
          <el-col :xl="1" :lg="1" :md="0" :sm="0" :xs="0" class="mt-10px"/>
          <el-col :xl="4" :lg="4" :md="24" :sm="24" :xs="24" class="mt-10px">
            <div class="box-back">
              <p>最近一次贷款放款时间</p>
              <p style="color: green">{{props.qjlddata.b22170054 ? props.qjlddata.b22170054 : '-'}}</p>
            </div>
          </el-col>
          <el-col :xl="1" :lg="1" :md="0" :sm="0" :xs="0" class="mt-10px"/>
          <el-col :xl="4" :lg="4" :md="24" :sm="24" :xs="24" class="mt-10px">
            <div class="box-back">
              <p>最近一次履约距今天数</p>
              <p style="color: green">{{props.qjlddata.b22170050 ? props.qjlddata.b22170050 : '-'}}</p>
            </div>
          </el-col>
          <el-col :xl="1" :lg="1" :md="0" :sm="0" :xs="0" class="mt-10px"/>
          <el-col :xl="4" :lg="4" :md="24" :sm="24" :xs="24" class="mt-10px">
            <div class="box-back">
              <p>正常还款订单数占贷款总订单数比例</p>
              <p style="color: green">{{props.qjlddata.b22170034 ? props.qjlddata.b22170034 : '-'}}</p>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-col>
    <el-col :span="24" class="mt-20px">
      <div>
        <p class="title"><span class="title-box"></span>近12个月贷款金额/笔数</p>
        <table style="width: 100%;table-layout: fixed;border-collapse: collapse; word-wrap: break-word">
          <tr>
            <th>额度</th>
            <th>0元-1000元</th>
            <th>1000元-3000元</th>
            <th>3000元-10000元</th>
            <th>10000元以上</th>
          </tr>
          <tr>
            <td>笔数</td>
            <td>{{ props.qjlddata.b22170012 }}</td>
            <td>{{ props.qjlddata.b22170013 }}</td>
            <td>{{ props.qjlddata.b22170014 }}</td>
            <td>{{ props.qjlddata.b22170015 }}</td>
          </tr>
        </table>
      </div>
    </el-col>
    <el-col :span="24" class="mt-20px">
      <div>
        <p class="title"><span class="title-box"></span>信用详情</p>
        <table>
          <tr>
            <th>类型</th>
            <th>建议授信额度</th>
            <th>额度置信度</th>
            <th>贷款类机构数</th>
            <th>贷款类产品数</th>
            <th>机构最大授信额度</th>
            <th>机构平均授信额度</th>
          </tr>
          <tr>
            <td>网络贷款</td>
            <td>{{ props.qjlddata.c22180001 }}</td>
            <td>{{ props.qjlddata.c22180002 }}</td>
            <td>{{ props.qjlddata.c22180003 }}</td>
            <td>{{ props.qjlddata.c22180004 }}</td>
            <td>{{ props.qjlddata.c22180005 }}</td>
            <td>{{ props.qjlddata.c22180006 }}</td>
          </tr>
          <tr>
            <td>消金贷款</td>
            <td>{{ props.qjlddata.c22180007 }}</td>
            <td>{{ props.qjlddata.c22180008 }}</td>
            <td>{{ props.qjlddata.c22180009 }}</td>
            <td>{{ props.qjlddata.c22180010 }}</td>
            <td>{{ props.qjlddata.c22180011 }}</td>
            <td>{{ props.qjlddata.c22180012 }}</td>
          </tr>
        </table>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">

const props = defineProps<{
  qjlddata: object
  dataId: number
}>()

const getFormat1 = () => {
  return '1000';
}
const getFormat2 = () => {
  return '100';
}

/** 数据查询-全景雷达 列表 */
defineOptions({ name: 'DataQueryQjld' })
</script>

<style scoped>
.row-bg * {
  font-size: 14px;
}
.title {
  font-weight: bolder;
}
.title-box{
  padding: 0 3px;
  background: #2d8cf0;
  margin-right: 8px;
}
.tab-header{
  text-align: center;
  padding: 5px;
  background: #f0f2f5;
  border: 1px solid #bfcbd9;
  margin-top: 10px
}

.box-content *{
  font-size: 16px;
  font-weight: bold;
}



.box-back{
  width: 100%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  background: white;
  padding: 10px;
  text-align: center;
  font-size: 16px;
  font-family: '微软雅黑';
  min-height: 100px;
  max-width: 100%;
  word-wrap: break-word;
  margin-bottom: 10px;
}
.box-back p{
  margin-top: 5px;
}



table {
  margin-top: 20px;
  border-collapse: collapse;  /* 边框合并 */
  width: 100%;  /* 表格宽度 */
}
th, td {
  border: 1px solid #ddd;  /* 单元格边框 */
  padding: 8px;  /* 单元格内边距 */
  text-align: center;  /* 单元格内容居中 */
}
.tr-green *{
  color: green;
}
.tr-red *{
  color: red;
}
th {
  background-color: #f9f9f9;  /* 表头背景色 */
}
tr{
  background-color: white;  /* 偶数行背景色 */
}
</style>
